<template>
 	<view class="page" :style="{paddingTop: `${topHeight}px`}">
		<view class="linear" :style="{top: `-${topHeight}px`}"></view>

    <view class="header">
    	<view>
    		<view class="h-l">
    			<view class="title">动态</view>
    		</view>
    	</view>
    	<view class="h-r">
    		<up-icon color="#fff" name="scan" size="28" @click="handleScancode"></up-icon>
    	</view>
    </view>

		<!-- 轮播图 -->
		<u-swiper
			:list="topList"
			keyName="path"
			showTitle
			:autoplay="true"
			interval="5000"
			previousMargin="12"
			nextMargin="12"
			height="184"
			bgColor="rgba(0,0,0, .0)"
			radius="10"
			circular
		></u-swiper>

		<!-- tab -->
		<up-sticky bgColor="#fff" :customNavHeight="topHeight">
			<view class="tabs">
				<up-tabs
					:list="tabs"
					@click="tabChange"
					activeStyle="#3c9cff"
				>
				</up-tabs>
			</view>
		</up-sticky>

		<!-- list -->
		<view class="list-container">
			<up-list :style="listHeightStyle">
				<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption">
					<up-list-item v-for="item in list" :key="item.id" @click="goDetail(item)" style="padding: 0 28rpx;">
						<view class="list-item">
							<view class="list-item-left">
								<view class="title">
									{{item.title}}
								</view>
								<view class="time">
									{{item.date}}
								</view>
							</view>
							<view class="list-item-right">
								<image :src="item.path" mode="aspectFill"></image>
							</view>
						</view>
					</up-list-item>
				</mescroll-body>
			</up-list>
		</view>

    <!-- 底部导航 -->
		<!-- <tabbar :value="1"></tabbar> -->
  </view>
</template>

<script>
import tabbar from '@/components/home-tabbar/index.vue'
import news from '@/apis/cloud/news';
import dayjs from 'dayjs';
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
import { useSocketStore } from "@/pinia-store/user.js"
import { mapStores } from 'pinia'

export default {
  name:'dynamicsHome',
	components: {
		tabbar,
	},
	mixins: [MescrollMixin],
  data() {
    return {
			upOption: {
				page: {
					size: 20 // 每页数据的数量,默认10
				},
				noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
				empty: {
					tip: '已经到底了'
				}
			},
      topHeight: 0,
			tabs: [{name: '集团新闻', value: 1}, {name: '公司动态', value: 2}, {name: '信息公开', value: 3}, {name: '企业文化', value: 4}, {name: '优秀员工', value: 5}, {name: '行业动态', value: 6}],
			pageSize: 20,
			pageNum: 1,
			total: 0,
			loading: false,
			newsType: 1,
			topList: [],
			keywords: '',
			list: [],
      listHeightStyle: {}, // 计算样式高度
    }
  },
  created(){
    let app = uni.getSystemInfoSync();
		this.topHeight = app.statusBarHeight;

  },
	onLoad() {
		this.getTopList();
		this.getList();
    this.calculateListHeight();
		uni.preloadPage({url: "/pages/chat/list/index"});
	},
	computed: {
	  ...mapStores(useSocketStore)
	},
  methods: {
	  //扫一扫
	  handleScancode() {
	  	/*
	  	uni.navigateTo({
	  		url: "/pages/watermarkCamera/index"
	  	})
	  	return;*/
	  	uni.scanCode({
	  		onlyFromCamera: true,
	  		success: function (res) {
	  			if(res.result == 'green-cloud-camera') {
	  				//跳转水印相机
	  				uni.reLaunch({
	  					url: "/pages/watermarkCamera/index"
	  				})
	  			} else if(res.result == 'green-cloud-worklog') {
	  				//跳转写日志
	  				uni.reLaunch({
	  					url: "/pages/worklog/index?jumpTo=写日志"
	  				})
	  			} else {
	  				uni.$u.toast('小心点，别乱扫！');
	  			}
	  		},
	  		fail: function(err) {
	  			console.error('扫描失败:', err);
	  		}
	  	});
	  },
    calculateListHeight() {
      const windowHeight = window.innerHeight; // 视口高度
      const topHeight = this.topHeight; // 顶部安全高度
      const headerHeight = 349; // 顶部轮播图、Tab栏等的高度（根据实际情况调整）

      // #ifdef APP-PLUS
      this.listHeightStyle = {
        height: `59vh`,
        overflowY: 'auto',
      };
      // #endif

      // #ifdef H5
      const listHeight = windowHeight - topHeight - headerHeight;
      this.listHeightStyle = {
        height: `${listHeight}px`,
        overflowY: 'auto',
      };
      // #endif
    },
		mescrollInit(mescroll) {
			this.mescroll = mescroll;
		},
		/*上拉加载的回调*/
		upCallback(page) {
			this.pageNum = page.num; // 页码, 默认从1开始
			this.pageSize = page.size; // 页码, 默认从1开始
			this.getList();
		},
		/*若希望重新加载列表,只需调用此方法即可(内部会自动page.num=1,再主动触发up.callback)*/
		reloadList(){
			this.mescroll.resetUpScroll();
		},
		tabChange(e) {
			this.newsType = e.value;
			this.reloadList();
		},
		getTopList() {
			news.getTopList({}).then(res => {
				this.topList = res.data;
			})
		},
		async getList() {
			const params = {
				page: this.pageNum,
				row: this.pageSize,
				type: this.newsType
				// keywords: this.keywords
			}

			const msg = await news.getList(params);
			if(msg.status === 1) {
				if(this.pageNum === 1) {
					this.list = msg.data;
				}else {
					msg.data.forEach(item => {
						this.list.push(item)
					});
				}
				this.mescroll.endByPage(msg.data.length, msg.total);
			}else {
				this.mescroll.endErr()
			}
		},
		goDetail(item) {
			uni.navigateTo({
				url: '/pages/dynamics/home/detail?id='+item.id
			})
		},
  }
}

</script>

<style lang="scss" scoped>
page {
	padding-bottom: 50rpx;
	overflow: hidden;
}
.linear {
	position: absolute;
	background: linear-gradient(to bottom, #418EEB, #fff);
	width: 100%;
	height: 600rpx;
}
.header {
	position: relative;
	z-index: 9999;
	padding: 10rpx;
	padding-right: 20rpx;
	display: flex;
	justify-content: space-between;
	.h-l {
		display: flex;
		align-items: center;
		.title {
			margin-left: 8rpx;
			font-size: 38rpx;
			font-weight: 500;
			color: #fff;
		}
	}
}
.tabs {
	margin-top: 16rpx;
	padding-right: 30rpx;
}
.list-item {
	padding: 38rpx 0 20rpx 0;
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid #eee;
	&-left {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.title {
			font-size: 30rpx;
			color: #333;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}
		.time {
			color: #666;
			font-size: 26rpx;
		}
	}
	&-right {
		image {
			width: 220rpx;
			height: 140rpx;
			border-radius: 10rpx;
		}
	}
}
</style>
